<template>
  <view>
    <view>Clicked: {{ count }} times use state</view>
    <view>Clicked: {{ total }} times use getter</view>
    <button @click="increment()">+</button>
    <button @click="decrement()">-</button>
    <button @click="incrementIfOdd()">Increment if odd</button>
    <button @click="incrementAsync()">Increment async</button>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'

  export default {
    computed: {
      // ...mapState(['count']),
      ...mapState({
        count: state => state.count,
      }),
      total() {
        return this.$store.getters.total;
      }
    },
    methods: {
      // ...mapMutations(['increment', 'decrement']),
      ...mapMutations({
        increment: 'increment',
        decrement: 'decrement'
      }),

      // ...mapActions(['incrementIfOdd', 'incrementAsync'])
      ...mapActions({
        incrementIfOdd: 'incrementIfOdd',
        incrementAsync: 'incrementAsync'
      })
    }
  }
</script><style>

view{
	display: flex;
	flex-direction: column;
	
}
</style>
